<template>
  <div class="wrap">
    <!-- 拍卖结束的商品部分-->
    <div class="sale">
      <h1 class="lf">拍卖结束的商品</h1>
      <div class="right rulse">当前用户是：<span class="blue strong"><a href="#">{{user.userName}}</a></span></div>
    </div>
    <!-- 拍卖结束的商品列表 -->
    <el-table :data="endedItems" stripe class="table">
      <el-table-column align="center" prop="auction.auctionName" label="名称"></el-table-column>
      <el-table-column align="center" prop="auction.auctionStartTime" label="开始时间"></el-table-column>
      <el-table-column align="center" prop="auction.auctionEndTime" label="结束时间"></el-table-column>
      <el-table-column align="center" prop="auction.auctionStartPrice" label="起拍价"></el-table-column>
      <el-table-column align="center" prop="auctionPrice" label="成交价"></el-table-column>
      <el-table-column label="买家" prop="user.userName" align="center"></el-table-column>
    </el-table>

    <h1>拍卖中的商品</h1>
    <!-- 拍卖中的商品部分-->
    <el-table :data="activeItems" stripe class="table">
      <el-table-column align="center" prop="auction.auctionName" label="名称"></el-table-column>
      <el-table-column align="center" prop="auction.auctionStartTime" label="开始时间"></el-table-column>
      <el-table-column align="center" prop="auction.auctionEndTime" label="结束时间"></el-table-column>
      <el-table-column align="center" prop="auction.auctionStartPrice" label="起拍价"></el-table-column>
      <el-table-column label="出价记录" align="center">
        <template slot-scope="scope">
          <div v-for="(bid, bidIndex) in scope.row.bids" :key="bidIndex">
            {{ bid.userName }} {{ bid.auctionPrice }}元
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Result",
  data() {
    return {
      user: localStorage.getItem("honey-user") ? JSON.parse(localStorage.getItem("honey-user")) : {},
      endedItems: [],
      activeItems: []
    }
  },
  methods: {
    auctionfirst() {
      request.get("/selectRecordMax")
          .then((res) => {
            console.log(res);
            this.endedItems = res;
          })
          .catch((err) => {
            console.error("请求失败:", err);
          });
    },
    auctionnext() {
      request.get("/selectRecordMaxnext")
          .then((res) => {
            console.log(res);
            this.activeItems = this.formatActiveItems(res);
          })
          .catch((err) => {
            console.error("请求失败:", err);
          });
    },
    formatActiveItems(items) {
      const activeMap = {};
      items.forEach(item => {
        const { auctionId, auction, auctionPrice, user } = item;
        if (!activeMap[auctionId]) {
          activeMap[auctionId] = {
            auction: auction,
            bids: []
          };
        }
        activeMap[auctionId].bids.push({
          userName: user.userName,
          auctionPrice: auctionPrice
        });
      });
      return Object.values(activeMap);
    }
  },
  created() {
    this.auctionfirst();
    this.auctionnext();
  }
};
</script>

<style scoped>
.wrap {
  padding: 20px;
}

.sale, .records, .items {
  margin: 20px 0;
}

.right {
  float: right;
}

.rulse {
  font-size: 14px;
}

.blue {
  color: blue;
}

.red {
  color: red;
}

.table {
  margin-top: 20px;
}
</style>